<template>
  <page-view class="relative flex flex-row justify-center items-center">
    <img src="../assets/img/login_bg.jpg" class="absolute w-full h-full -z-10 blur-[30px]" />
    <div class="login-box  rounded-lg">
      <div class="flex flex-row justify-center items-center py-20">
        <el-icon size="36px">
          <Eleme />
        </el-icon>
        <span class="text-[26px] font-bold ml-6">饿了点餐吧！后台</span>
      </div>
      <el-form :model="adminInfo" class="box-border px-20 mt-10" :rules="adminInfoRules" ref="loginFormEl">
        <el-form-item prop="zh">
          <el-input v-model="adminInfo.zh" placeholder="请输入账号">
            <template #prepend>账号</template>
          </el-input>
        </el-form-item>
        <el-form-item prop="admin_pwd">
          <el-input v-model="adminInfo.admin_pwd" type="password" placeholder="请输入账号">
            <template #prepend>密码</template>
          </el-input>
        </el-form-item>
        <div class="flex flex-row justify-evenly">
          <el-button type="primary" @click="submitLoginForm" :loading-icon="Loading" :loading="isLoading">{{ isLoading ?
              "正在登录..." : "登录系统"}}
          </el-button>
          <el-button type="danger">忘记密码</el-button>
        </div>
      </el-form>
    </div>
  </page-view>
</template>
<script setup>
import { reactive, ref } from "vue";
import { useRouter } from "vue-router";
import { Eleme, Loading } from "@element-plus/icons-vue";
import { ElNotification } from "element-plus";
import API from "../utils/API";
//应为导出的时候没有加default，所以这里导入要解构
import { mainStore } from "../store";

const isLoading = ref(false);
//得到路由管理对象
const router = useRouter();

//创建这个store
const store = mainStore();
console.log(store);

const adminInfo = reactive({
  zh: "13811111111",
  admin_pwd: "123456",
});
//验证
const adminInfoRules = {
  zh: [
    {
      required: true,
      message: "请输入账号",
      trigger: "blur",
    },
  ],
  admin_pwd: [
    {
      required: true,
      message: "请输入密码",
      trigger: "blur",
    },
  ],
};
const loginFormEl = ref(null);
const submitLoginForm = () => {
  loginFormEl.value.validate((value) => {
    if (value) {
      console.log("验证成功");
      checkLogin();
    } else {
      console.log("验证失败");
    }
  });
};
const checkLogin = () => {
  isLoading.value = true;
  API.adminInfo
    .checkLogin(adminInfo)
    .then((result) => {
      console.log(result);
      //登录成功的结果要干什么
      store.setToken(result.token);
      store.setLoginUserInfo(result.loginUserInfo);

      //登录成功以后要跳转页面
      ElNotification({
        title: "提示",
        message: "登录成功",
        type: "success",
      });
      //跳转路由
      router.replace({
        name: "DateView",
      });
    })
    .catch((error) => {
      console.log(error);
    })
    .finally(() => {
      isLoading.value = false;
    });
};
</script>
<style scoped lang="scss">
.login-box {
  @apply w-[420px] py-20;
  box-shadow: 0 0 25px 10px white;
}
</style>
